/* The main calendar widget.DIV containing a table. */
div.calendar{position:relative;z-index:100;}
.calendar, .calendar table{border:1px solid #cccccc;font-size:11px;color:#000;cursor:default;background:#efefef;font-family:arial,verdana,sans-serif;}
/* Header part -- contains navigation buttons and day names. */
.calendar .button{
text-align:center;padding:2px;}/* "<<", "<", ">", ">>" buttons have this class */
.calendar thead .title{font-weight:bold;text-align:center;background:#333333;color:#ffffff;padding:2px;}/* This holds the current "month, year" */
.calendar thead .headrow{background:#dedede;color:#000;}/* Row <TR> containing navigation buttons */
.calendar thead .name{border-bottom:1px solid #cccccc;padding:2px;text-align:center;color:#000;}/* Cells <TD> containing the day names */
.calendar thead .weekend{color:#dedede;}/* How a weekend day name shows in header */
.calendar thead .hilite{background:#bbbbbb;color:#000000;border:1px solid #cccccc;padding:1px;}/* How do the buttons in header appear when hover */
.calendar thead .active{background:#c77;padding:2px 0px 0px 2px;}/* Active (pressed) buttons in header */
.calendar thead .daynames{background:#dddddd;}/* Row <TR> containing the day names */
/* The body part -- contains all the days in month. */
.calendar tbody .day{width:2em;text-align:right;padding:2px 4px 2px 2px;}/* Cells <TD> containing month days dates */
.calendar table .wn{padding:2px 3px 2px 2px;border-right:1px solid #cccccc;background:#dddddd;}
.calendar tbody .rowhilite td{background:#666666;color:#ffffff;}
.calendar tbody .rowhilite td.wn{background:#666666;color:#ffffff;}
.calendar tbody td.hilite{background:#999999;padding:1px 3px 1px 1px;border:1px solid #666666;}/* Hovered cells <TD> */
.calendar tbody td.active{background:#000000;color:#ffffff;padding:2px 2px 0px 2px;}/* Active (pressed) cells <TD> */
.calendar tbody td.selected{font-weight:bold;border:1px solid #000;padding:1px 3px 1px 1px;background:#000000;color:#ffffff;}/* Cell showing today date */
.calendar tbody td.weekend{color:#cccccc;}/* Cells showing weekend days */
.calendar tbody td.today{ font-weight:bold;}
.calendar tbody .disabled{ color:#999;}
.calendar tbody .emptycell{visibility:hidden;}/* Empty cells (the best is to hide them) */
.calendar tbody .emptyrow{display:none;}/* Empty row (some months need less than 6 rows) */
/* The footer part -- status bar and "Close" button */
.calendar tfoot .footrow{text-align:center;background:#cccccc;color:#000;}/* The <TR> in footer (only one right now) */
.calendar tfoot .ttip{border-top:1px solid #cccccc;background:#efefef;color:#000000;}/* Tooltip (status bar) cell <TD> */
.calendar tfoot .hilite{background:#666666;border:1px solid #f40;padding:1px;}/* Hover style for buttons in footer */
.calendar tfoot .active{background:#999999;padding:2px 0px 0px 2px;}/* Active (pressed) style for buttons in footer */
/* Combo boxes (menus that display months/years for direct selection) */
.combo{position:absolute;display:none;top:0px;left:0px;width:4em;cursor:default;border:1px solid #655;background:#ffffff;color:#000;font-size:smaller;}
.combo .label{width:100%;text-align:center;}
.combo .hilite{background:#fc8;}
.combo .active{border-top:1px solid #cccccc;border-bottom:1px solid #cccccc;background:#efefef;font-weight:bold;}